<template>
  <div>
    <!-- <el-date-picker
      v-model="value1"
      type="week"
      format="yyyy 第 WW 周"
      @change="getDateWeek"
      placeholder="选择周"
    >
    </el-date-picker> -->
     请选择日期：
      <el-select
        v-model="datatime"
        @change="onChangeDate"
        placeholder="请选择时间"
      >
        <el-option
          v-for="item in optionstime"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    <ve-line :data="chartData" :settings="chartSettings"></ve-line>
  </div>
</template>

<script>
import VeLine from "v-charts/lib/line";
import moment from "moment";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: "success",
        pending: "danger",
      };
      return statusMap[status];
    },
    orderNoFilter(str) {
      return str.substring(0, 30);
    },
  },
  props: {
    agentId: Number,
  },
  components: {
    VeLine,
  },
  data() {
    this.chartSettings = {
      metrics: ["uCount", "停留时间"],
      dimension: ["currentDate"],
      labelMap: {
        currentDate: "日期",
        uCount: "登录次数",
      },
    };
    return {
      list: [],
      agent: this.agentId,
      companyId: 0,
      value1: "",
      chartData: {
        columns: ["日期", "登录次数", "停留时间"],
        rows: [
        ],
      },
      optionstime: [
        { value: 1, label: "最近七日" },
        { value: 2, label: "最近半个月" },
        { value: 3, label: "最近一个月" },
      ],
      datatime: 1,
    };
  },
  created() {
    this.formatDate();
    this.onChangeDate();
  },
  methods: {
    formatDate() {
      //获取当前日期
      var myDate = new Date();
      var nowY = myDate.getFullYear();
      var nowM = myDate.getMonth() + 1;
      var nowD = myDate.getDate();
      var enddate =
        nowY +
        "-" +
        (nowM < 10 ? "0" + nowM : nowM) +
        "-" +
        (nowD < 10 ? "0" + nowD : nowD); //当前日期
      this.value1 = enddate;
      //获取三十天前日期
      var lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
      var lastY = lw.getFullYear();
      var lastM = lw.getMonth() + 1;
      var lastD = lw.getDate();
      var startdate =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      return [startdate, enddate];
    },
    addChartData() {
      var nowTemp = new Date(); //当前时间
      var oneDayLong = 24 * 60 * 60 * 1000; //一天的毫秒数
      var c_time = nowTemp.getTime(); //当前时间的毫秒时间
      var c_day = nowTemp.getDay() || 7; //当前时间的星期几
      var m_time = c_time - (c_day - 1) * oneDayLong; //当前周一的毫秒时间
      var monday = new Date(m_time); //设置周一时间对象
      var m_year = monday.getFullYear();
      var m_month = monday.getMonth() + 1;
      var m_date = monday.getDate();
      // console.log(m_year + "-" + m_month + "-" + m_date); //周一的年月日
      var val =
        m_year +
        "-" +
        (m_month < 10 ? "0" + m_month : m_month) +
        "-" +
        (m_date < 10 ? "0" + m_date : m_date); //当前日期
      this.getDateWeek(new Date(val));
    },
    onChangeDate() {
      let startDate = "";
      let endDate = "";
      let istemp=7;
      if (this.datatime == 1) {
        startDate = moment().subtract("days", 6).format("YYYY-MM-DD");
        endDate = moment().format("YYYY-MM-DD");
      } else if (this.datatime == 2) {
        startDate = moment().subtract("days", 14).format("YYYY-MM-DD");
        endDate = moment().format("YYYY-MM-DD");
         istemp=15;
      } else if (this.datatime == 3) {
        startDate = moment().subtract("days", 30).format("YYYY-MM-DD");
        endDate = moment().format("YYYY-MM-DD");
        istemp=31;
      }
      getUserCodeStatistics({ startDate,endDate }).then((rsp) => {
        if (rsp.code == 0) {
          this.chartData.rows = [];
          let viewData = rsp.data;
          for (let i = 0; i < istemp; i++) {
            var lw = new Date(Date.parse(startDate) + 1000 * 60 * 60 * 24 * i);
            let currentY = lw.getFullYear();
            let currentM = lw.getMonth() + 1;
            let currentD = lw.getDate();

            let currentDate =
              currentY +
              "-" +
              (currentM < 10 ? "0" + currentM : currentM) +
              "-" +
              (currentD < 10 ? currentD : currentD); //

            let uCount = 0;
            if (viewData.findIndex((x) => x.yyMMdd == currentDate) >= 0) {
              uCount = viewData.find((x) => x.yyMMdd == currentDate).uCount;
            }
            this.chartData.rows.push({
              currentDate: currentDate,
              uCount: uCount,
            });
          }
        }
      });
      this.$emit("customer",this.datatime)
    },
    onChangeData(val)
    {
      if(this.datatime!=val)
      {
        this.datatime=val;
        this.onChangeDate();
      }
    }
  },
};
</script>
<style scoped >
.spHeight tr {
  height: 10px;
}
.spHeight {
  width: 100%;
  padding-top: 5px;
}
.rgb3737170 {
  color: rgb(37, 37, 170);
}
</style>
